Skip to content

Add hover visual effect for Popup button #13891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add hover visual effect for Popup button #13891

wants to merge 2 commits into from

Conversation

@LeafShi1
Copy link
Member

@LeafShi1 LeafShi1 commented Sep 23, 2025 •
edited
Loading

Fixes #13882

Proposed changes

  • Distinguish between the normal state and hover state of the Popup button, and add a visual effect of about to be pressed to the hover state

Customer Impact

  • In Dark mode, Popup buttons also have normal visual feedback

Regression?

  • No

Risk

  • Minimal

Screenshots

Before

Hover on the button:

Hover-beforeChanges.mp4

Press the button:

Press-BeforeChanges.mp4

After

Hover on the button:

Hover-AfterChanges.mp4

Press the button:

Pressed-AfterChanges.mp4

Test methodology

  • Manually

Test environment(s)

  • .net 10.0.0-rc.1.25468.102
Microsoft Reviewers: Open in CodeFlow

@LeafShi1 LeafShi1 requested a review from a team as a code owner September 23, 2025 06:57
@github-actions github-actions bot added the area-DarkMode Issues relating to Dark Mode feature label Sep 23, 2025
Copilot AI reviewed Sep 23, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds hover visual effects for Popup buttons in dark mode by implementing distinct rendering states for normal, hover (hot), and pressed button states.

Key changes:

  • Enhanced the pressed state with deeper shadows and brighter highlights for better visual depth
  • Added a new hover (hot) state that provides intermediate visual feedback between normal and pressed states
  • Updated comments to clarify the visual effects for each button state

@LeafShi1 LeafShi1 force-pushed the Fix_13882_Add_hover_VisualEffect_for_button branch from e879dd0 to c67a19b Compare September 23, 2025 07:00
@codecov
Copy link

codecov bot commented Sep 23, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.14038%. Comparing base (f812cb6) to head (c6a34f4).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files 
@@                 Coverage Diff                 @@
##                main      #13891         +/-   ##
===================================================
- Coverage   77.16116%   77.14038%   -0.02079%     
===================================================
  Files           3273        3274          +1     
  Lines         644919      645050        +131     
  Branches       47694       47702          +8     
===================================================
- Hits          497627      497594         -33     
- Misses        143607      143779        +172     
+ Partials        3685        3677          -8
Flag Coverage Δ
Debug 77.14038% <0.00000%> (-0.02079%) ⬇️
integration 18.98162% <0.00000%> (-0.08371%) ⬇️
production 51.99150% <0.00000%> (-0.05427%) ⬇️
test 97.41286% <ø> (+0.00029%) ⬆️
unit 49.41490% <0.00000%> (+0.00663%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

KlausLoeffelmann
KlausLoeffelmann reviewed Sep 23, 2025
View reviewed changes
Copy link
Member

@KlausLoeffelmann KlausLoeffelmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question:
You had your MP4s shown under "Before" and "After" in your PR description. That would be wrong. But I think you increased the contrast.

Is it rather "Hover" and "Pressed" instead of that?
If that's a case, could you show all 4 versions?

  • Pressed - Before/After
  • Hover - Before/After

Thanks!

@LeafShi1
Copy link
Member Author

LeafShi1 commented Sep 24, 2025 •
edited
Loading

Question: You had your MP4s shown under "Before" and "After" in your PR description. That would be wrong. But I think you increased the contrast.

Is it rather "Hover" and "Pressed" instead of that? If that's a case, could you show all 4 versions?

  • Pressed - Before/After
  • Hover - Before/After

Thanks!

I updated the description. The visual change is clearer when the button has a background color.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@KlausLoeffelmann KlausLoeffelmann KlausLoeffelmann left review comments

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@LeafShi1 LeafShi1

Labels

area-DarkMode Issues relating to Dark Mode feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[DarkMode] Button with FlatStyle.Popup does not show hover state in Dark Mode

2 participants

@LeafShi1 @KlausLoeffelmann